<template>
  <div class="RightFoldPanel" :style="{ right: isFolded ? '-420px' : '16px', top: isHeight ? '84px' : '' }">
    <!-- <div ref="control" class="control" @click="onChangeFold">
      <el-icon>
        <DArrowLeft v-if="isFolded"></DArrowLeft>
        <DArrowRight v-else></DArrowRight>
      </el-icon>
      <span>{{ isFolded ? "展" : "收" }}</span>
      <span>{{ isFolded ? "开" : "缩" }}</span>
    </div> -->
    <div
      class="panel-content"
      :style="{ height: isHeight ? 'calc(100vh - 90px)' : 'calc(100vh - 160px)', width: isWidth }"
      :class="{ deepcolor: isHeight }"
    >
      <slot />
    </div>
  </div>
</template>
<script lang="ts" name="RightFoldPanel" setup>
const props = defineProps({
  isHeight: {
    type: Boolean,
    default: false
  },
  isFolded: {
    type: Boolean,
    default: false
  },
  isWidth: {
    type: String,
    default: '420px'
  }
});
const open = () => {
  // this.isFolded = false
};
const close = () => {
  // this.isFolded = true
};
</script>
<style lang="scss" scoped>
.RightFoldPanel {
  position: absolute;
  top: 136px;
  right: 20px;
  z-index: 22;
  display: flex;
  align-items: center;
  overflow: hidden;
  transition: all 0.35s ease-in-out;
  z-index: 99;

  .panel-content {
    width: 420px;
    overflow: hidden;
    color: white;
    background: rgba(2, 16, 40, 0.58);
    &.deepcolor {
      background: rgba(1, 26, 63, 0.8);
    }
  }

  .control {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    cursor: pointer;
    color: white;
    background: rgba(44, 79, 95, 0.7);
    border-left: none;
    border-radius: 0 4px 4px 0;
  }
}
</style>
